import React, { Component } from 'react';
import {
  Table,
  Pagination,
  Dialog,
  Button,
  Input,
  Form,
  Grid,
  Select,
  Search,
  CascaderSelect,
  Radio, Message,
} from '@alifd/next';
import { withRouter } from 'react-router-dom';
import IceContainer from '@icedesign/container';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import TableHead from '../chooseHead';
import PageHead from '../../../../components/PageHead';
import Bill from '../bill';
import Cell from '../../../../components/CHUFANG';
import './index.scss';
import { getLocalTime } from '../../../../utils/localTime';
import service from '../../../../utils/service';
import api from '../../../../utils/api';
import dataSource from '../../../../utils/datasource';
import { list } from '../../../../utils/setting';

const { Row, Col } = Grid;
const RadioGroup = Radio.Group;

const formItemLayout2 = {
  labelCol: {
    fixedSpan: 5,
  },
  wrapperCol: {
    span: 14,
  },
};

const quguang = ['0.00', '0.25', '0.50', '0.75', '1.00', '1.25', '1.50', '1.75', '2.00', '2.25', '2.50', '2.75', '3.00', '3.25', '3.50', '3.75', '4.00', '4.25', '4.50', '4.75', '5.00','5.25','5.50','5.75','6.00','6.25','6.50','6.75','7.00','7.25','7.50','7.75','8.00','8.25','8.50','8.75', '9.00', '9.25', '9.50', '9.75', '10.00', '10.25', '10.50', '10.75', '11.00', '11.25', '11.50', '11.75', '12.00', '12.25', '12.50', '12.75', '13.00', '13.25', '13.50', '13.75', '14.00', '14.25', '14.50', '14.75', '15.00'];
const sanguang = { number000: '0.00', number025: '0.25', number050: '0.50', number075: '0.75', number100: '1.00', number125: '1.25', number150: '1.50', number175: '1.75', number200: '2.00', number225: '2.25', number250: '2.50', number275: '2.75', number300: '3.00', number325: '3.25', number350: '3.50', number375: '3.75', number400: '4.00', number425: '4.25', number450: '4.50', number475: '4.75', number500: '5.00',number525: '5.25',number550: '5.50',number575: '5.75', number600: '6.00',number625: '6.25',number650: '6.50',number675: '6.75', number700: '7.00',number725: '7.25',number750: '7.50',number775: '7.75', number800: '8.00',number825: '8.25',number850: '8.50',number875: '8.75', number900: '9.00',number925: '9.25',number950: '9.50',number975: '9.75',number1000: '10.00', number1025: '10.25', number1050: '10.50', number1075: '10.75', number1100: '11.00', number1125: '11.25', number1150: '11.50', number1175: '11.75', number1200: '12.00', number1225: '12.25', number1250: '12.50', number1275: '12.75', number1300: '13.00', number1325: '13.25', number1350: '13.50', number1375: '13.75', number1400: '14.00', number1425: '14.25', number1450: '14.50', number1475: '14.75', number1500: '15.00' };

@withRouter
export default class goodList extends Component {
  state = {
    isLoading: true,
    headerData: {
      w_name: sessionStorage.getItem('w_name'),
      uname: sessionStorage.getItem('uname'),
    }, // 头部信息
    SupperDataList: [], // 供应商列表
    GoodsTypeList: [], // 商品类别
    GoodsList: [], // 商品列表
    SingleGoodsData: {}, // 单个商品信息
    page: 1, // 当前页数
    search: '', // 搜索条件
    s_id: '', // 供应商id
    g_id: '', // 商品ID
    class_id: '', // 商品类别ID
    countPage: '', // 总页数
    perPage: 10, // 单页展示数据量
    Dvisible0: false, // 非镜片展示页
    Dvisible1: false, // 镜片展示页
    Bvisible0: false, // 非镜片采购展示
    Bvisible1: false, // 镜片采购展示页
    dataSource,
    lensType: '- / -', // 镜片类型
    sg: '', // 散光
    qg: '', // 屈光
    glassData: [], // 眼镜数据
    number: { stock: '' }, // 非镜片数量
  };
  // 公共信息
  formPurInChange = (value) => {
    // console.log(value);
    this.setState(
      {
        headerData: {
          ...this.state.headerData,
          ...value,
        },
        glassData: [],
      }
    );
    if (value.s_id !== this.state.s_id) {
      this.setState(
        {
          s_id: value.s_id,
        }, () => {
          this.getGoodsList();
        }
      );
    }
  }
  // 获取供应商列表
  getSupperInfo= () => {
    service({
      method: 'get',
      url: api.GetSuperList,
    })
      .then((res) => {
        const data = res.data.list;
        const NewSList = [];
        data.forEach((item) => {
          NewSList.push({ label: item.name, value: item.id.toString() });
        });
        this.setState(
          {
            SupperDataList: NewSList,
          }
        );
        // console.log(this.state.placeArr);
      });
  }
    // 获取商品类别列表
    getGoodsTypeList= () => {
      service({
        method: 'get',
        url: api.GoodsTypeList,
      })
        .then((res) => {
          // console.log(res);
          if (res.data.code === 200) {
            const data = res.data;
            this.setState(
              {
                GoodsTypeList: data.class_list,

              }
            );
          }
        });
    }
    // 获取商品列表
getGoodsList= () => {
  service({
    method: 'get',
    url: api.GoodsList,
    params: {
      search: this.state.search || '',
      class_id: this.state.class_id || '',
      s_id: this.state.headerData.s_id || '',
      page: this.state.page || 1,
    },
  })
    .then((res) => {
      // console.log(res);
      if (res.data.code === 200) {
        const data = res.data.list;
        this.setState(
          {
            GoodsList: data,
            countPage: res.data.count_page,
            isLoading: false,
          }
        );
      }
    });
}
// 获取单个商品的信息
getSingleData= (id) => {
  service({
    method: 'get',
    url: api.GoodsInfo,
    params: {
      g_id: id,
    },
  })
    .then((res) => {
      // console.log(res);
      const data = res.data.goods_info;
      data.ope_time = getLocalTime(data.ope_time);
      data.pro_time = getLocalTime(data.pro_time);
      data.bus_time = getLocalTime(data.bus_time);
      data.org_time = getLocalTime(data.org_time);
      data.reg_time = getLocalTime(data.reg_time);
      this.setState(
        {
          SingleGoodsData: data,
        }
      );
      // console.log(this.state.placeArr);
    });
}
// 提交入库单
handlePurInBtn= () => {
  service({
    method: 'post',
    url: api.PuerIn,
    data: {
      u_id: this.state.headerData.u_id,
      w_id: this.state.headerData.w_id,
      add_time: this.state.headerData.add_time,
      s_id: this.state.headerData.s_id,
      purchase_info: this.state.glassData,
    },
  })
    .then((res) => {
      // console.log(res);
      if (res.data.code === 200) {
        Message.success('入库成功！');
        // history.go(0);
        this.props.history.push('/pur/summary');
      }
    });
}
componentDidMount() {
  this.getGoodsList();
  this.getGoodsTypeList();
  this.getSupperInfo();
}


  handlePaginationChange = (page) => {
    this.setState(
      {
        page,
        isLoading: true,
      },
      () => {
        this.getGoodsList();
      }
    );
  };

  // 点击详情
handleGoodDetail = (index) => {
  // console.log(index);
  const GoodData = this.state.GoodsList;
  // console.log(GoodData);
  const id = GoodData[index].g_id;
  const GoodType = GoodData[index].goods_type;
  this.getSingleData(id);
  if (GoodType === 0) {
    this.setState({
      Dvisible0: true,
      g_id: id,
    });
  } else {
    this.setState({
      Dvisible1: true,
      g_id: id,
    });
  }
};
// 点击采购
handleGoodBuy = (index) => {
  const headerData = this.state.headerData;
  if (!headerData.s_id) {
    Message.warning('请选择供应商!');
  } else if (!headerData.add_time) {
    Message.warning('请选择入库日期!');
  } else {
    // console.log(index);
    const GoodData = this.state.GoodsList;
    // console.log(GoodData);
    const id = GoodData[index].g_id;
    const GoodType = GoodData[index].goods_type;
    if (GoodType === 0) {
      this.setState({
        Bvisible0: true,
        g_id: id,
      });
    } else {
      this.setState({
        Bvisible1: true,
        g_id: id,
      });
    }
  }
}
// 弹窗关闭
onClose=() => {
  this.setState({
    Dvisible0: false,
    Dvisible1: false,
    Bvisible0: false,
    Bvisible1: false,
  });
}
onGlassClose=() => {
  const data = this.state.dataSource;
  for (let i = 0; i < data.length; i++) {
    for (const item in data[i]) {
      if (item !== '屈光度' && data[i][item] !== '') {
        data[i][item] = '';
      }
    }
  }
  this.setState(
    {
      Bvisible1: false,
      dataSource: data,
    }
  );
}
// 单选镜片类型
onRadioChange= (value) => {
  this.setState(
    {
      lensType: value,
    }
  );
}
// 商品列表操作
renderOper = (value, index) => {
  return (
    <div>
      <a style={styles.link.detail} onClick={() => this.handleGoodDetail(index)}>
        详情
      </a>
      <span style={styles.separator} />
      <a style={styles.link.edit} onClick={() => this.handleGoodBuy(index)}>
        采购
      </a>
    </div>
  );
};
handleBlur= (value, index) => {
  const dataSource = this.state.dataSource;
  // this.setState({ qg });
  const sg = this.state.sg;
  dataSource[index][sg] = value;
  // console.log(dataSource);
  this.setState(
    {
      dataSource,
    }
  );
}
// 非镜片
handleStockFormChange= (value) => {
  this.setState(
    {
      number: value,
    }
  );
}
// 非镜片提交
handleSubBtnClick = () => {
  service({
    method: 'get',
    url: api.PurInNoScreen,
    params: {
      g_id: this.state.g_id,
      stock: this.state.number.stock,
    },
  })
    .then((res) => {
      // console.log(res);
      if (res.data.code === 200) {
        Message.success('添加成功！');
        const data = this.state.glassData;
        res.data.info.key = data.length;
        data.push(res.data.info);
        this.setState({
          number: {
            stock: '',
          },
          Bvisible0: false,
          glassData: data,
        }, () => {
          // console.log(this.state.glassData);
        });
      } else {
        Message.error('添加失败！');
      }
    });
}
// 眼镜提交
handleGlassSubBtnClick= () => {
  const dataSource = this.state.dataSource;
  const g_id = this.state.g_id;
  const lens_type = this.state.lensType;
  let subData = '';
  for (let i = 0; i < dataSource.length; i++) {
    for (const item in dataSource[i]) {
      if (item !== '屈光度' && dataSource[i][item] !== '') {
        subData += `${quguang[i]}:${sanguang[item]}:${dataSource[i][item]},`;
        dataSource[i][item] = '';
      }
    }
  }
  subData = subData.substring(0, (subData.length - 1));
  // console.log(subData);
  service({
    method: 'get',
    url: api.PurInScreen,
    params: {
      g_id,
      lens_type,
      str: subData,
    },
  })
    .then((res) => {
      // console.log(res);
      if (res.data.code === 200) {
        Message.success('添加成功！');
        const data = this.state.glassData;
        res.data.info.forEach((item, index) => {
          item.key = data.length;
          data.push(item);
        });
        this.setState({
          Bvisible1: false,
          glassData: data,
          dataSource,
        }, () => {
          // console.log(this.state.glassData);
        });
      } else {
        Message.error('添加失败！');
      }
    });
}
PurInFilterChange = (value) => {
  // console.log(value);
  this.setState(
    {
      class_id: value.class_id,
      search: value.search,
      isLoading: true,
      page: 1,
    }, () => {
      // console.log(this.state.s_id, this.state.class_id, this.state.search);
      this.getGoodsList();
    }
  );
}
// handleDel 删除单子某条数据
handleDel= (index) => {
  const data = this.state.glassData;
  data.splice(index, 1);
  this.setState(
    {
      glassData: data,
    }
  );
}
// 修改数据
handleBillChange= (valueKey, value, index) => {
  const data = this.state.glassData;
  data[index][valueKey] = value;
  this.setState(
    {
      glassData: data,
    }, () => {
      // console.log(this.state.glassData);
    }
  );
}
renderCell = (value, index, record) => {
  return <Cell defaultTitle={value} index={index} Blur={this.handleBlur} />;
}
render() {
  const { isLoading, SingleGoodsData, GoodsList, SupperDataList, GoodsTypeList, page, countPage, perPage, dataSource } = this.state;
  return (
    <div style={styles.container}>
      <TableHead formPurInChange={this.formPurInChange} />
      <PageHead title="商品列表" />
      <IceContainer >
        <IceFormBinderWrapper style={styles.alignRight}
          onChange={this.PurInFilterChange}
          value={this.state}
          ref="formPurInFilter"
        >
          <Row style={{ marginBottom: '20px' }} gutter="4">
            <Col span="6">
              <span style={styles.SelectLabel}>商品类别</span>
              <IceFormBinder name="class_id">
                <CascaderSelect
                  placeholder="请选择商品类别"
                  expandTriggerType="hover"
                  size="large"
                  hasClear
                  dataSource={GoodsTypeList}
                  style={styles.Select}
                  listStyle={{ width: '180px' }}
                />
              </IceFormBinder>
            </Col>
            <Col span="6">
              <span style={styles.SelectLabel}>商品搜索</span>
              <IceFormBinder name="search">
                <Search
                  type="normal"
                  placeholder="请输入商品名称或商品条码"
                  size="medium"
                  style={styles.Select}
                />
              </IceFormBinder>
            </Col>
          </Row>
        </IceFormBinderWrapper>
        <Table loading={isLoading} dataSource={GoodsList} hasBorder={false}  >
          <Table.Column title="商品条码" dataIndex="goods_bar_code" />
          <Table.Column title="供应商名称" dataIndex="name" />
          <Table.Column title="商品条码" dataIndex="goods_bar_code" />
          <Table.Column title="品牌" dataIndex="goods_class_name" />
          <Table.Column title="商品名称" dataIndex="goods_name" />

          {/* <Table.Column title="屈光度" dataIndex="ref_degrees" />
          <Table.Column title="散光度" dataIndex="ast_degrees" />
          <Table.Column title="镜片类型" dataIndex="lens_type" /> */}
          <Table.Column title="型号" dataIndex="model" />
          <Table.Column title="颜色/镀层" dataIndex="color_layer" />
          <Table.Column title="规格" dataIndex="spec" />
          <Table.Column title="单位" dataIndex="unit" />
          <Table.Column title="零售价" dataIndex="retail_price" />
          <Table.Column title="进货价" dataIndex="buying_price" />
          {/* <Table.Column title="折扣" dataIndex="usagrebateRate" /> */}
          <Table.Column title="操作" cell={this.renderOper} />
        </Table>

        {/* 商品信息详情 */}
        <Dialog
          visible={this.state.Dvisible0}
          onClose={this.onClose}
          footer={<div><Button type="primary" onClick={this.onClose} className="dialogButton EditBtn">确定</Button></div>}
          footerAlign="center"
          id="DDialog"
          style={{ marginTop: '25px' }}
        >
          <h3 className="titleWrap"><span className="dialogTitle">商品信息详情信息</span></h3>
          <IceContainer className="dialogContent">
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">商品条码:</Col>
              <Col span="6" >{SingleGoodsData.goods_bar_code}</Col>

              <Col span="6" className="listNameQ">供应商:</Col>
              <Col span="6">{SingleGoodsData.name}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">商品类别:</Col>
              <Col span="6" >{SingleGoodsData.class_name}</Col>

              <Col span="6" className="listNameQ">商品名称:</Col>
              <Col span="6">{SingleGoodsData.goods_name}</Col>
            </Row>

            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">型号:</Col>
              <Col span="6">{SingleGoodsData.model}</Col>
              <Col span="6" className="listNameQ">颜色/膜层:</Col>
              <Col span="6" >{SingleGoodsData.color_layer}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">特殊参数:</Col>
              <Col span="6">{SingleGoodsData.case_value}</Col>
              <Col span="6" className="listNameQ">单位:</Col>
              <Col span="6" >{SingleGoodsData.unit}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">规格:</Col>
              <Col span="6">{SingleGoodsData.spec}</Col>
              <Col span="6" className="listNameQ">零售价:</Col>
              <Col span="6">{SingleGoodsData.retail_price}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">折扣率:</Col>
              <Col span="6">{SingleGoodsData.rebate}</Col>
              <Col span="6" className="listNameQ">进货价:</Col>
              <Col span="6" >{SingleGoodsData.buying_price}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>

              <Col span="6" className="listNameQ">积分率:</Col>
              <Col span="6">{SingleGoodsData.integral_rate}</Col>
            </Row>
          </IceContainer>
        </Dialog>
        <Dialog
          visible={this.state.Dvisible1}
          // autoFocus
          onClose={this.onClose}
          footer={<div><Button type="primary" onClick={this.onClose} className="dialogButton EditBtn">确定</Button></div>}
          footerAlign="center"
          id="DDialog"
          style={{ marginTop: '25px' }}
        >
          <h3 className="titleWrap"><span className="dialogTitle">商品信息详情信息</span></h3>
          <IceContainer className="dialogContent">
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">商品条码:</Col>
              <Col span="6" >{SingleGoodsData.goods_bar_code}</Col>

              <Col span="6" className="listNameQ">供应商:</Col>
              <Col span="6">{SingleGoodsData.name}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">商品类别:</Col>
              <Col span="6" >{SingleGoodsData.class_name}</Col>

              <Col span="6" className="listNameQ">商品名称:</Col>
              <Col span="6">{SingleGoodsData.goods_name}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">ADD:</Col>
              <Col span="6" >{SingleGoodsData.ADD}</Col>

              <Col span="6" className="listNameQ">折射率:</Col>
              <Col span="6">{SingleGoodsData.refractivity}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">是否渐进:</Col>
              <Col span="6" >{SingleGoodsData.is_gradual}</Col>

              <Col span="6" className="listNameQ">是否球面:</Col>
              <Col span="6">{SingleGoodsData.is_sphere}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              {/* <Col span="6" className="listNameQ">直径:</Col>
              <Col span="6" >{SingleGoodsData.diameter}</Col> */}

              <Col span="6" className="listNameQ">型号:</Col>
              <Col span="6">{SingleGoodsData.model}</Col>
              <Col span="6" className="listNameQ">颜色/膜层:</Col>
              <Col span="6" >{SingleGoodsData.color_layer}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">特殊参数:</Col>
              <Col span="6">{SingleGoodsData.case_value}</Col>
              <Col span="6" className="listNameQ">单位:</Col>
              <Col span="6" >{SingleGoodsData.unit}</Col>

            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">进货价:</Col>
              <Col span="6" >{SingleGoodsData.buying_price}</Col>
              <Col span="6" className="listNameQ">零售价:</Col>
              <Col span="6">{SingleGoodsData.retail_price}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">折扣率:</Col>
              <Col span="6">{SingleGoodsData.rebate}</Col>
              <Col span="6" className="listNameQ">积分率:</Col>
              <Col span="6">{SingleGoodsData.integral_rate}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>

              <Col span="6" className="listNameQ">生产企业:</Col>
              <Col span="18">{SingleGoodsData.esta_person}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">生产许可证号:</Col>
              <Col span="6">{SingleGoodsData.pro_number}</Col>
              <Col span="6" className="listNameQ">生产许可证有效期至:</Col>
              <Col span="6">{SingleGoodsData.pro_time}</Col>

            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">经营许可证号:</Col>
              <Col span="6">{SingleGoodsData.ope_number}</Col>
              <Col span="6" className="listNameQ">经营许可证有效期至:</Col>
              <Col span="6">{SingleGoodsData.ope_time}</Col>
            </Row>

            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">注册证号:</Col>
              <Col span="6">{SingleGoodsData.reg_number}</Col>
              <Col span="6" className="listNameQ">注册证有效期至:</Col>
              <Col span="6">{SingleGoodsData.reg_time}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">有效期（月）:</Col>
              <Col span="6">{SingleGoodsData.term_time}</Col>
              <Col span="6" className="listNameQ">国际医疗器械类别编号:</Col>
              <Col span="6">{SingleGoodsData.medical_number}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">医疗器械名称:</Col>
              <Col span="6">{SingleGoodsData.medical_name}</Col>
              <Col span="6" className="listNameQ">预留1:</Col>
              <Col span="6">{SingleGoodsData.m_reserve_one}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">预留2:</Col>
              <Col span="6">{SingleGoodsData.m_reserve_two}</Col>
            </Row>
          </IceContainer>
        </Dialog>

        {/* 采购弹窗 */}
        <Dialog
          id="BDialog0"
          visible={this.state.Bvisible0}
          footerActions={[]}
          style={{ marginTop: '25px' }}
          onClose={this.onClose}
          footerAlign="center"
          footer={<div><Button type="primary" onClick={this.handleSubBtnClick} className="dialogButton EditBtn SubBtn">确定</Button><Button type="primary" onClick={this.onClose} className="dialogButton OutBtn" style={{ margin: '0' }}>取消</Button></div>}
        >
          <div>
            <h3 className="titleWrap"><span className="dialogTitle">采购商品数量</span></h3>
            <IceContainer className="dialogContent">
              <Form
                style={styles.form1}
                inline
                size="large"
                {...formItemLayout2}
                onChange={this.handleStockFormChange}
                value={this.state.number}
              >
                <Form.Item label="采购数量" className="formItem">
                  <Input
                    placeholder="请输入采购数量"
                    id="stock"
                    name="stock"
                  />
                </Form.Item>
              </Form>
            </IceContainer>
          </div>
        </Dialog>
        {/* 镜片 */}
        <Dialog
          id="BDialog0"
          visible={this.state.Bvisible1}
          footerActions={[]}
          style={{ marginTop: '25px' }}
          onClose={this.onGlassClose}
          footerAlign="center"
          footer={<div><Button type="primary" onClick={this.handleGlassSubBtnClick} className="dialogButton EditBtn SubBtn">确定</Button><Button type="primary" onClick={this.onGlassClose} className="dialogButton OutBtn">取消</Button></div>}
        >
          <div>
            <h3 className="titleWrap"><span className="dialogTitle">采购商品数量</span></h3>
            <IceContainer className="dialogContent glassBuy">
              <RadioGroup dataSource={list} value={this.state.lensType} onChange={this.onRadioChange} style={{ marginBottom: '20px', fontSize: '16px' }} />
              <Table loading={isLoading} dataSource={dataSource} hasBorder className="glassTable" maxBodyHeight={600} fixedHeader >
                <Table.Column style={{ padding: '8px 0' }} title="屈光/散光" dataIndex="屈光度" className="leftHead" />
                <Table.Column title="0.00" dataIndex="number000" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number000' }); }} />
                <Table.Column title="0.25" dataIndex="number025" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number025' }); }} />
                <Table.Column title="0.50" dataIndex="number050" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number050' }); }} />
                <Table.Column title="0.75" dataIndex="number075" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number075' }); }} />
                <Table.Column title="1.00" dataIndex="number100" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number100' }); }} />
                <Table.Column title="1.25" dataIndex="number125" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number125' }); }} />
                <Table.Column title="1.50" dataIndex="number150" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number150' }); }} />
                <Table.Column title="1.75" dataIndex="number175" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number175' }); }} />
                <Table.Column title="2.00" dataIndex="number200" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number200' }); }} />
                <Table.Column title="2.25" dataIndex="number225" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number225' }); }} />
                <Table.Column title="2.50" dataIndex="number250" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number250' }); }} />
                <Table.Column title="2.75" dataIndex="number275" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number275' }); }} />
                <Table.Column title="3.00" dataIndex="number300" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number300' }); }} />
                <Table.Column title="3.25" dataIndex="number325" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number325' }); }} />
                <Table.Column title="3.50" dataIndex="number350" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number350' }); }} />
                <Table.Column title="3.75" dataIndex="number375" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number375' }); }} />
                <Table.Column title="4.00" dataIndex="number400" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number400' }); }} />
                <Table.Column title="4.25" dataIndex="number425" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number425' }); }} />
                <Table.Column title="4.50" dataIndex="number450" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number450' }); }} />
                <Table.Column title="4.75" dataIndex="number475" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number475' }); }} />
                <Table.Column title="5.00" dataIndex="number500" cell={this.renderCell} onDoubleClick={() => { this.setState({ sg: 'number500' }); }} />
              </Table>
            </IceContainer>
          </div>
        </Dialog>
      </IceContainer>
      <Pagination
        style={styles.pagination}
        type="normal"
        current={page}
        onChange={this.handlePaginationChange}
        total={countPage * perPage}
      />
      <Bill headerData={this.state.headerData} glassData={this.state.glassData} handleDel={this.handleDel} handleBillChange={this.handleBillChange} handlePurInBtn={this.handlePurInBtn} />
    </div>
  );
}
}

const styles = {
  container: {
    padding: '0 0px 20px',
  },
  listTitle: {
    textAlign: 'left',
    lineHeight: '40px',
    fontSize: '20px',
    color: '#333333',
    width: '140px',
    height: '40px',
  },
  link: {
    margin: '0 5px',
    color: 'rgba(49, 128, 253, 0.65)',
    cursor: 'pointer',
    textDecoration: 'none',
    edit: {
      color: '#8272EC',
      cursor: 'pointer',
    },
    detail: {
      color: '#5584FF',
      cursor: 'pointer',
    },
    delete: {
      color: '#FF3000',
      cursor: 'pointer',
    },
  },
  separator: {
    margin: '0 8px',
    display: 'inline-block',
    height: '12px',
    width: '1px',
    verticalAlign: 'middle',
    background: '#e8e8e8',
  },
  pagination: {
    marginTop: '20px',
    textAlign: 'center',
  },
  upload: {
    float: 'right',
    color: '#fff',
    backgroundImage: 'linear-gradient(90deg, #FFA20D 0%, #FF6E02 100%)',
    boxShadow: '0 -2px 6px 0 rgba(255,110,2,0.30)',
    borderRadius: '20px 20px 0 0',
    width: '124px',
    height: '40px',
    cursor: 'pointer',
    border: 'none',
    icon: {
      cursor: 'pointer',
      fontSize: '16px',
      textAlign: 'left',
      lineHeight: '22px',
    },
  },
  Select: {
    float: 'left',
    width: 'calc(100% - 100px)',
    height: '38px',
    maxWidth: '300px',
    DatePicker: {
      width: 'calc(100% - 100px)',
      minWidth: '130px',
      float: 'left',
      maxWidth: '300px',
    },
  },
  SelectLabel: {
    fontSize: '14px',
    lineHeight: '40px',
    float: 'left',
    margin: '0 10px 0 0',
    padding: '0',
    color: '#666',
    textAlign: 'right',
    minWidth: '60px',
  },
  form1: {
    display: 'flex',
    justifyContent: 'center',
  },
};
